<template>
  <div class="details">
    <!-- 顶部导航栏 -->
    
      <router-link to="/" >
        <van-nav-bar  title="详情页" left-text="返回" left-arrow />
      </router-link>
    
      <img :src="`${img}`" alt="" class="img1" />
    <div class="ctitle">{{title}}</div>

    <van-cell-group>
      <van-cell :title="`来源：${author }`" :value="`${time}`" />
    </van-cell-group>
    <div v-html="article" class="d1"></div>
    
  </div>
</template>

<script>

export default {
  data(){
    return{
      img:'',
      title:'',
      author:'',
      time:'',
      article:''
    }
  },
  methods:{
    art(){
      let did = this.$route.query.did;
      this.axios.get(`/details/art?did=${did}`).then((res)=>{
        console.log(res);
        this.img = res.data.results[0].img;
        this.title = res.data.results[0].title;
        this.author = res.data.results[0].author;
        this.time = res.data.results[0].TIME;
        this.article = res.data.results[0].article;
      })
    }
  },
  created(){
    this.art();
  }
 
}
</script>


<style scoped>

.img1 {
  width: 90%;
  margin-top: 50px;
  margin: 0 auto;
  display: block;
  border-radius: 0.3125rem;
}
.ctitle {
  text-align: center;
  margin-top: 0.5rem;
  font-size:0.9rem;
  color: #1989fa;
   font-weight: 600;
}
.time {
  float: right;
  margin-right: 0.2rem;
}
.details {
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
  /* text-align: center; */
}
.origin {
  margin-top: 1rem;
}

.d1 >>> img {
  width: 90%;
  border-radius: 0.3125rem;
  margin: 0 auto;
  display: flex;

}
.d1 >>> .text-p,d2{
     padding: 1rem;
    line-height: 1rem;
  
}


/* img {
  width: 90%;
  border-radius: 0.3125rem;
}
 .text-p,d2{
     padding: 1rem;
    line-height: 1rem;
  
} */
.text-p p{
  font-weight: 600;
  position: relative;
  left: 0rem;
}

.d1 >>> p{
  color:cornflowerblue !important;
  font-size: .75rem;
}
/* p{
  color:cornflowerblue !important;
  font-size: .7rem;
   text-align: center; 
} */
</style>